<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header">
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-face-add">
        	<input name="deptId"  type="hidden" id="treeId" value='101'/>
        	<!--  
			<div class="form-group">
				<label class="col-sm-3 control-label">部门名称：</label>
				<div class="col-sm-8">
					<input class="form-control" type="text" name="deptName" onclick="selectDeptTree()" readonly="true" id="treeName">
				</div>
			</div>
			-->
			<div class="form-group">	
				<label class="col-sm-3 control-label">姓名：</label>
				<div class="col-sm-8">
					<input id="name" name="name" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">工号：</label>
				<div class="col-sm-8">
					<input id="no" name="no" class="form-control" type="text">
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">状态：</label>
				<div class="col-sm-8">
				    <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
						<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.isDefault == 'Y' ? true : false}">
						<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
					</div>
				</div>
			</div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">人脸照片存放地址：</label>
				<div class="col-sm-8">
					<input id="url" name="url" class="form-control" type="hidden">
					<input id="urlImg" name="file" type="file" data-show-caption="true" >
				</div>
			</div>
			
			 <div class="form-group">    
                <label class="col-sm-3 control-label">附件上传：</label>
<!--                 <div class="col-sm-8"> -->
<!--                     <input id="file-Portrait" type="file" multiple="multiple" name="file"> -->
<!--                 </div> -->
            </div>
			<div class="form-group">	
				<label class="col-sm-3 control-label">备注：</label>
				<div class="col-sm-8">
					<input id="remark" name="remark" class="form-control" type="text">
				</div>
			</div>
		</form>
	</div>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
		var prefix = ctx + "system/face"
		$("#form-face-add").validate({
			rules:{
				deptName:{
					required:true,
				},
				name:{
					required:true,
				},
				url:{
					required:true,
				},
			}
		});
		
		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/add", $('#form-face-add').serialize());
	        }
	    }
		
	  /*用户管理-新增-选择部门树*/
      function selectDeptTree() {
      	var treeId = $("#treeId").val();
      	var deptId = $.common.isEmpty(treeId) ? "100" : $("#treeId").val();
      	var url = ctx + "system/dept/selectDeptTree/" + deptId;
			var options = {
				title: '选择部门',
				width: "380",
				url: ctx + "system/dept/selectDeptTree/" + deptId,
				callBack: doSubmit
			};
			$.modal.openOptions(options);
		}
		
      function doSubmit(index, layero){
			var tree = layero.find("iframe")[0].contentWindow.$._tree;
			if ($.tree.notAllowParents(tree)) {
				var body = layer.getChildFrame('body', index);
  			$("#treeId").val(body.find('#treeId').val());
  			$("#treeName").val(body.find('#treeName').val());
  			layer.close(index);
			}
		}  
		  
		
//       $(function() {
//           //初始化上传组件
//           $.file.initAddFiles("file-Portrait","file");

//       });
   
  function initAddFile(ctrlName) {    
    var control = $('#' + ctrlName); 
    control.fileinput({
    	theme: "explorer", //主题
        language: 'zh', //设置语言
        uploadUrl: prefix+'/upload',  //上传地址
        showUpload: false, //是否显示上传按钮
        showRemove:true,
        dropZoneEnabled: false,
        showCaption: true,//是否显示标题
        allowedPreviewTypes: ['image'],
        allowedFileTypes: ['image'],
        allowedFileExtensions:  ['jpg', 'gif', 'png', 'jpeg'],
        maxFileSize : 0,
       	maxFileCount: 1,
       	maxImageWidth: 2000, //图片的最大宽度
        maxImageHeight: 2000,//图片的最大高度
        uploadAsync: true, //异步上传  
        enctype: 'multipart/form-data',
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        initialPreview: [ 
//         		预览图片的设置
//                "<img src='"+url+"' class='file-preview-image'  style='width:300px;height:200px;ax-width:70%;max-height:70%'>",
        ],
        layoutTemplates:{
        	actionDelete:'',
        	actionUpload:'',
        },
    }).on("filebatchselected", function(event, files) {  
        $(this).fileinput("upload");  
    })  
    .on("fileuploaded", function(event, data) {  
        $("#url").attr("value",data.response);  
	});  
}

$(function () {
	var url =  $("#url").val();
	if((url == null || url== '')){
		initAddFile("urlImg");
	} 
	
	$("#urlImg").on("fileuploaded", function (event, data, previewId, index) {

		var result = data.response;
        
        var filePath = result.filePath;
        var fileNameReal = result.fileNameReal;
        var fileNameShow = result.fileNameShow;
        var fileSize = result.fileSize;
		
		$("#url").val(filePath);  
    });  
	
	$("#urlImg").on("filecleared",function(event, data, msg){
		$("#url").val("");  
	});

})
      
	</script>
</body>
</html>
